<template>
    <Button class="action-button action btn-inline" :class="{'action-loading':loading}" :loading="loading" v-if="actionShow" :icon="actionModel.icon" type="ghost" @click="actionTrigger">
        {{actionModel.name}}
    </Button>
</template>
<script>
import $ from '@/common'
export default {
    props: {
        model: {},
        index: {},
        row: {}
    },
    data() {
        return {
            loading: false

        }
    },
    computed: {
        actionShow() {
            if (this.actionModel.locate === 'inline' && (!this.actionModel.dev || $.dev)) {
                if (this.actionModel.param && this.actionModel.param.condition) {
                    let data = this.row
                    data
                    try {
                        return eval(eval('`' + this.actionModel.param.condition + '`'))
                    } catch (ex) {
                        console.warn(ex)
                        return false
                    }
                } else {
                    return true
                }
            } else {
                return false
            }
        }
    },
    created() {
        this.actionModel = this.model
    },
    methods: {
        actionTrigger() {
            if (this.actionModel.param && this.actionModel.param.loading) {
                this.loading = true
            }
            var trigger = this.$parent.actionTrigger({
                code: this.actionModel.code,
                row: this.row,
                index: this.index,
                data: this.row.id
            })
            if (trigger && trigger.finally) {
                this.loading = true
                trigger.catch((ex) => {
                    console.error(ex)
                }).finally(() => {
                    this.loading = false
                })
            }
            return trigger
        }
    }

}
</script>
<style lang="less">
.btn-inline {
    margin: 2px 0;
}

.btn-inline+.btn-inline {
    margin-left: 4px;
    margin-right: 0;
}
</style>

